<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>移动学术论坛</title>
    <link th:href="@{/js/navbar-fixed-top.css}" rel="stylesheet">
    <link th:href="@{/css/bootstrap.min.css}" type="text/css" rel="stylesheet">
    <style>
        body{
            background-color:lightgoldenrodyellow;

            /*background-color: #dff6e5;*/
        }
        ul{
            list-style-type: none;
        }
        .outer{
            border: 2px solid #b9def0 ;
            border-radius: 5px;
            height: 300px;
            position: relative;
            /*z-index: 1000;*/
        }
        .img li{
            position: absolute;
            top: 0;
            left: 0;
        }
        img{
            height: 296px;
            width: 914px;
            margin: 0 auto;
            border-radius: 5px;
        }
        .num{
            position: absolute;
            bottom: 20px;
            right: 250px;
            /*z-index: 2000;*/

        }
        .num li{
            display: inline-block;
            background-color: #ff9b24;
            color: white;
            height: 20px;
            width: 20px;
            border-radius: 50%;
            line-height: 20px;
            text-align: center;
            margin-left: 50px;
        }
        .btn{
            position: absolute;
            width: 30px;
            height: 60px;
            background-color: #dfffdb;
            top: 50%;
            margin-top: -30px;
            display: none;

        }
        .left-btn{
            left: 0;
        }
        .right-btn{
            right: 0;
        }
        .outer:hover .btn{
            display: block;
        }
        .current {
            background-color: red !important;
            color: white;
        }
        #plate ul{
            list-style-type: none;
        }
        #plate span{
            font-size: 22px;
            font-family: 方正舒体;
        }
        #plate ul li {
            margin-top: 10px;
            background-color: #b2dba1;
            text-align: center;
            line-height: 30px;
            border-radius: 17px;
        }
        .cur_scan_name{
            display: block;
            font-size: 21px;
            font-family: 方正舒体;
            margin-top: 15px;
        }
        #cur_scan span{
            margin-top: 10px;
            margin-left: 5px;
            font-size: 20px;
            font-family: 方正舒体;
            display: inline-block;
            list-style-type: none;
            height: 25px;
            text-align: center;
            line-height: 25px;
            border-radius: 5px;
            background-color: #9acfea;
        }
    </style>
</head>
<body >
   <nav class="navbar navbar-default navbar-fixed-top" style="background-image: url(/img/bar.jpg)">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">移动学术论坛</span></a>
            </div>
            <div class="navbar-collapse collapse">
                <ul id="navbar" class="nav navbar-nav">
                    <li class="active"><a href="/index">主页</a></li>
                    <li><a href="#about">关于论坛</a></li>
                    <li><img th:src="@{/img/money.png}" style="height: 18px;width: 18px;"></li>
                    <li><a href="#love">打赏论坛</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right" th:if="${userstatu}==0">
                    <li><a href="/login">登录</a></li>
                    <li><a href="/register">注册</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right" th:if="${userstatu}==1">
                    <li><img th:src="${#request.getContextPath()+user.getImageAddr()}" style="height: 50px;width: 50px;border-radius: 50%"></li>
                    <li><a th:href="${'/user/'+user.getUserId()}" th:text="${user.getUserName()}"></a></li>
                </ul>

            </div><!--/.nav-collapse -->
        </div>
    </nav>
   <div class="container">
        <div class="col-md-2" style="border-right: 2px solid #b9def0;position: fixed;height: 100%;overflow-y:auto ">
            <div id="plate">
                <span>板块信息</span>
                <ul class="plate-item" th:each="p:${platelist}">
                    <li>
                        <div style="height: 30px ">
                            <a th:href="'/showplate/'+${p.getPlateId()}" th:text="${p.getPlateName()}"></a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-md-10" style="margin-left: 250px">
            <div class="col-lg-12 outer">
                <ul class="img">
                    <li><a><img th:src="@{/img/l1.jpg}"></a></li>
                    <li><a><img th:src="@{/img/l2.jpg}"></a></li>
                    <li><a><img th:src="@{/img/l3.jpg}"></a></li>
                    <li><a><img th:src="@{/img/l4.jpg}"></a></li>
                    <li><a><img th:src="@{/img/l5.jpg}"></a></li>
                    <li><a><img th:src="@{/img/l6.jpg}"></a></li>
                </ul>
                <ul class="num">
                    <li class="current">1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                </ul>
                <div class="right-btn btn"> <span style="line-height: 48px;margin-left:-7px;font-size: 20px" class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> </div>
                <div class="left-btn btn"> <span style="line-height: 48px;margin-left:-7px;font-size: 20px" class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> </div>
            </div>
            <div class="col-md-9" style="height: 1100px">
                <!--问答模块 -->
                <div>
                    <div>
                        <span style="font-family: 幼圆;font-size: 30px">问答</span>
                        <span class="glyphicon glyphicon-fire" style="color: red;float: right;margin-top: 23px">热门问答</span>
                    </div>
                    <div style="border: 4px solid #b2dba1;border-radius: 5px">
                        <ul style="list-style-type: disc;margin: 10px 13px" th:each="question:${question_posts}">
                            <li>
                                <span style="float: right">
                                    <a th:href="'/showplate/'+${question.plate.getPlateId()}" th:text="${question.plate.getPlateName()}">某某板块</a>
                                </span>
                                <div class="title">
                                    <a th:href="'/showposts/'+${question.getPostsId()}" th:text="${question.getPostsTitle()}"></a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <!--热帖模块 -->
                <div>
                <div style="background-color: #9acfea;width: 65px;margin-top: 15px;text-align: center;border-radius: 5px 5px 0 0">热帖榜</div>
                <div style="border: 4px solid #9acfea;border-radius: 0 5px 5px 5px">
                    <ul style="list-style-type: disc;margin: 10px 13px" th:each="host_post:${host_post_list}">
                        <li>
                                <span style="float: right">
                                    <a th:href="'/showplate/'+${host_post.plate.getPlateId()}" th:text="${host_post.plate.getPlateName()}"></a>
                                </span>
                            <div class="title">
                                <a th:href="'/showposts/'+${host_post.getPostsId()}" th:text="${host_post.getPostsTitle()}"></a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
                <!--名人榜 -->
                <div>
                    <div style="background-color: #9acfea;width: 65px;margin-top: 15px;text-align: center;border-radius: 5px 5px 0 0">名人榜</div>
                    <div style="border: 4px solid #9acfea;border-radius: 0 5px 5px 5px">
                        <ul style="list-style-type: disc;margin: 10px 13px">
                            <li>
                                <span style="float: right">
                                    <a href="/plate">某某板块</a>
                                </span>
                                <div class="title">
                                    <a href="#">sdasdadqwdq</a>
                                </div>
                            </li>
                            <li>
                                <span style="float: right">
                                    <a href="/plate">某某板块</a>
                                </span>
                                <div class="title">
                                    <a href="#">sdasdadqwdq</a>
                                </div>
                            </li>
                            <li>
                                <span style="float: right">
                                    <a href="/plate">某某板块</a>
                                </span>
                                <div class="title">
                                    <a href="#">sdasdadqwdq</a>
                                </div>
                            </li>
                            <li>
                                <span style="float: right">
                                    <a href="/plate">某某板块</a>
                                </span>
                                <div class="title">
                                    <a href="#">sdasdadqwdq</a>
                                </div>
                            </li>
                            <li>
                                <span style="float: right">
                                    <a href="/plate">某某板块</a>
                                </span>
                                <div class="title">
                                    <a href="#">sdasdadqwdq</a>
                                </div>
                            </li>
                            <li>
                                <span style="float: right">
                                    <a href="/plate">某某板块</a>
                                </span>
                                <div class="title">
                                    <a href="#">sdasdadqwdq</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-3" style="border-left:2px solid lavender ;height: 1100px">
                <div>
                    <span class="cur_scan_name">个人信息</span>
                    <div id="user_info" th:if="${userstatu} == 1">
                        <strong>用户名:</strong><span th:text="${user.getUserName()}"></span><br>
                        <strong>Q Q:</strong><span th:text="${user.getQq()}"></span><br>
                        <strong>邮箱:</strong><span th:text="${user.getUserEmail()}"></span><br>
                        <strong>个人名言:</strong><span>努力就有收获的</span>
                    </div>
                    <hr>
                </div>
                <!--常去板块 -->
                <div>
                    <span class="cur_scan_name">最近浏览的板块</span>
                    <div id="cur_scan" th:each="m:${best_plate}">
                        <span th:text="${m.getPlateName()}"></span>
                    </div>
                    <hr>
                </div>
                <!--公告栏 -->
                <div>
                    <span class="cur_scan_name">公告</span>
                    <ul style="list-style-type: circle " th:each="notice:${notices}">
                        <li><a href="#" th:text="${notice.getNoticeTitle()}">谁家猪死了</a><br>发布时间：<span th:text="${notice.getNoticeDate()}"></span></li>
                    </ul>
                     <hr>
                </div>
                <!--留言板-->
                <div>
                    <span class="cur_scan_name">留言板</span>
                    <form>
                        <input type="text" style="border: 10px solid darkgoldenrod;background-color: #2b542c;width: 100%;height: 80px;color: white;border-radius: 5px;margin-bottom: 5px">
                        <input type="button" class="btn-success" value="发表留言">
                    </form>
                    <hr>
                </div>
                <!--排行榜-->
                <div>
                    <span class="cur_scan_name">板块排行</span>
                    <ul th:each="best,i:${best_plate}">
                        <li><div style="display:inline-block; width: 16px;height: 16px;text-align: center;line-height: 16px;background-color: #d58512;color: white;font-weight: bold;margin-left: -40px;margin-right: 10px;" th:text="${i.index}+1"></div><a th:href="'/showplate/'+${best.getPlateId()}" th:text="${best.getPlateName()}">牛逼板块</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
   <footer>
        <div class="footer-container">
            <div class="footer-link">
                <div class="footer-link-item">

                </div>
            </div>
        </div>
   </footer>
<script th:src="@{/js/jquery-3.3.1.js}"></script>
<script th:src="@{/js/bootstrap.js}"></script>
<script>
   $(".num li").mouseover(function () {
       $(this).addClass("current").siblings().removeClass("current");
       var index = $(this).index();
       i = index;
       $(".img li").eq(index).fadeIn(1000).siblings().fadeOut(1000);
   });
   var time = setInterval(move,1500);
   var i=0;
   function move() {
       if (i==4){
           i=-1;
       }
       i++;
       $(".num li").eq(i).addClass("current").siblings().removeClass("current");
       $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
   }
   function moveL(){
       if (i==0){
           i=5;
       }
       i--;
       $(".num li").eq(i).addClass("current").siblings().removeClass("current");
       $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
   }
   $(".outer").hover(function () {
       clearInterval(time)
   },function () {
       time=setInterval(move,1500)
   })
   $(".left-btn").click(function () {
       move();
   });
   $(".right-btn").click(function () {
       move();
   })

</script>
</body>
</html>